<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: honeydew;
            height: 700px;
        }
        .container {
            border: 1px solid lavenderblush;
            display: grid;
            grid-template-rows: 50px 50px 2fr 40px;
            grid-template-columns: 1fr 2.5fr;
            height: 100%;
            margin: 5% 20% 10% 20%;
            box-shadow: -5px 5px 5px red;
        }
        .item {
            text-align: center;
        }
        .header {
            background-color: peachpuff;
            grid-column: 1 / span 3;
            grid-row: 1;
        }
        .nav {
            background-color: lavender;
            grid-column: 1 / span 3;
            grid-row: 2;
        }
        .nav_ul {
            display: flex;
        }
        .nav_ul > li {
            margin-left: 10px;
        }
        .aside {
            display: grid;
            grid-template-rows: 1fr 3fr;
        }
        /*自己*/
        .own {
            background-color: #30cfd0;
            display: grid;
            grid-template-columns: 1fr 1.3fr 60px;
        }
        .head_portrait {
            place-self: center;
        }
        .nickname {
            justify-self: start;
            align-self: center;
        }
        .status {
            justify-self: start;
            align-self: center;
        }
        .head_portrait > img {
            width: 70px;
            height: 70px;
            border-radius: 35px ;
        }
        /*好友*/
        .friends {
            background-color: azure;
        }
        .friends_ul > li {
            margin-bottom: 20px;
        }
        li {
            list-style: none;
        }
        .main {
            background-color: lavenderblush;
            grid-column: 2 / 3;
            display: grid;
            grid-template-rows: 2.5fr 30px 1fr;
            height: 100%;
        }
        .main_content {
            background-color: beige;
            display: grid;
            grid-template-rows: 1fr 7fr;
        }
        .c_header {
            background-color: #b94648;
        }
        .c_main{
            background-color: lavender;
            display: grid;
            grid-template-columns: 1fr 10fr 1fr;
            grid-template-rows: repeat(20,auto);
            height: 331px;
            overflow: auto;
        }
        .c_main_left {
            background-color: blueviolet;
            justify-self: center;
            align-self: start;
        }
        .c_main_right {
            background-color: green;
            justify-self: center;
            align-self: start;
        }
        .c_main_content {
            background-color: #F5F5F5;
            height: 100%;
        }
        .your_picture > img {
            width: 40px;
            height: 40px;
        }
        .my_picture > img {
            width: 40px;
            height: 40px;
        }
        
        .main_util {
            grid-column: 1 / 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }
        .util_left {
            background-color: #cefff4;
            display: flex;
            padding-left: 10px;
        }
        .left {
            margin-left: 10px;
            text-align: center;
        }
        .util_right {
            background-color: azure;
            display: flex;
            justify-self: end;
            margin-right: 10px;
        }
        .right {
            margin-left: 10px;
            text-align: center;
        }
        .main_input {
            background-color: lightcyan;
            grid-column: 1 / 2;
            display: grid;
            grid-template-rows: 3fr 1fr;
        }
        .input {
            grid-column: 1 / 1;
        }
        #textInput {
            resize:none;
            width:auto;
            height:92%;
            width: 97%;
            border: none;
            outline: none;
            padding-left: 3%;
        }
        .send {
            justify-self: end;
            margin-right: 10px;
        }
        .send > .send_btn {
            cursor: pointer;
            border: none;
            background-color: #F5F5F5;
            color: limegreen;
            width: 90px;
            height: 30px;
            border-radius: 5px ;
        }
        .footer {
            background-color: #cefff4;
            grid-column: 1 / span 3;
            grid-row: 4;
        }
        
    </style>
</head>

<body>
<div class="container">
    <header class="item header">
        <p>Simple Chat</p>
       
    </header>
    <!-- 头部导航 -->
    <nav class="nav">
        <ul class="nav_ul">
            <li>www.baidu.com</li>
            <li>www.syasuo.com</li>
            <li>www.nnn.com</li>
            <li>www.aqy.com</li>
            <li>www.wangyi.com</li>
        </ul>
    </nav>
    <!-- 侧边 -->
    <aside class="aside">
        <div class="own">
            <div class="head_portrait">
                <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
            </div>
            <div class="nickname">
                <span>其无恶意</span>
            </div>
            <div class="status">
                <span>[在线]</span>
            </div>
        </div>
        <div class="friends">
            <ul class="friends_ul">
                <li>阿松大</li>
                <li>阿松大</li>
                <li>阿松大</li>
                <li>阿松大</li>
                <li>阿松大</li>
                <li>阿松大</li>
            </ul>
        </div>
    </aside>
    <main class="main">
        <div class="main_content">
            <div class="c_header">
                <span>阿松大</span>
            </div>
            <div class="c_main">
                <div class="c_main_left">
                    <div class="your_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>
                </div>
                <div class="c_main_content">
                    　　流云，流云。流云！
                </div>
                <div class="c_main_right">
                    <!--<div class="my_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>-->
                </div>
                <div class="c_main_left">
                    <!--<div class="your_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>-->
                </div>
                <div class="c_main_content">
                    　我的流年似水，谁的一路相随。

                    　　在这个充满遗忘的季节，谁又在回忆最初的那片天空，和那颗回不到天空的星星。

                    　　流云般的生活，淡淡的。无关色彩。这种催人失落的岁月，慢慢吞噬着梦想。

                    　　流云般的过客，以并不华丽的姿态瞬间即逝。途上的风景让人留恋，却得不到留念。

                    　　谁的伤人泪水，让我今夜沉醉。

                    　　黑色的曲调本来就是应运而生，并不独指时代的变迁。

                    　　这个让人不得不寂寞的世纪。流云般的年华，麻痹着多数人的心灵。

                    　　一切无关冷暖，无关痛痒，无关喜怒，无关对错。

                    　　这独自删改的故事，本来就该如流云般消逝。这只是个让人醉生梦死的归宿。

                    　　流云留下了风和雨，冲刷了时间罪过。却有多少雨能淋湿心房，有多少风能吹出芬芳。却是时间能让双鬓发黄。

                    　　流云带走了自己曾留下的一切，不必记得。流云去，流云来。这是需要遗忘的理由。

                    　　黑夜带走寂寞，留下失落。

                    　　我的年华落幕，谁在各走各路。

                    　　流云，流云。流云！
                </div>
                <div class="c_main_right">
                    <div class="my_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>
                </div>
                <div class="c_main_left">
                    <div class="your_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>
                </div>
                <div class="c_main_content">
                    　　流云，流云。流云！
                </div>
                <div class="c_main_right">
                    <!--<div class="my_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>-->
                </div>
                <div class="c_main_left">
                    <!--<div class="your_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>-->
                </div>
                <div class="c_main_content">
                    　我的流年似水，谁的一路相随。

                    　　在这个充满遗忘的季节，谁又在回忆最初的那片天空，和那颗回不到天空的星星。

                    　　流云般的生活，淡淡的。无关色彩。这种催人失落的岁月，慢慢吞噬着梦想。

                    　　流云般的过客，以并不华丽的姿态瞬间即逝。途上的风景让人留恋，却得不到留念。

                    　　谁的伤人泪水，让我今夜沉醉。

                    　　黑色的曲调本来就是应运而生，并不独指时代的变迁。

                    　　这个让人不得不寂寞的世纪。流云般的年华，麻痹着多数人的心灵。

                    　　一切无关冷暖，无关痛痒，无关喜怒，无关对错。

                    　　这独自删改的故事，本来就该如流云般消逝。这只是个让人醉生梦死的归宿。

                    　　流云留下了风和雨，冲刷了时间罪过。却有多少雨能淋湿心房，有多少风能吹出芬芳。却是时间能让双鬓发黄。

                    　　流云带走了自己曾留下的一切，不必记得。流云去，流云来。这是需要遗忘的理由。

                    　　黑夜带走寂寞，留下失落。

                    　　我的年华落幕，谁在各走各路。

                    　　流云，流云。流云！
                </div>
                <div class="c_main_right">
                    <div class="my_picture">
                        <img src="https://img2.woyaogexing.com/2022/10/29/b789b32cead4e3b7!400x400.jpg">
                    </div>
                </div>
            </div>
        </div>
        <div class="main_util">
            <div class="util_left">
                <span class="left left1">😀</span>
                <span class="left left2">📂</span>
                <span class="left left3">✂</span>
                <span class="left left4">📚</span>
            </div>
            <div class="util_right">
                <span class="right right1">📞</span>
                <span class="right right2">💻</span>
            </div>
        </div>
        <div class="main_input">
            <div class="input">
                <textarea id="textInput"></textarea>
            </div>
            <div class="send">
                <button class="send_btn">发送(S)</button>
            </div>
        </div>
    </main>
    <footer class="item footer">
        <span>©版权归SYASUO所有</span>
    </footer>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $(function(){
        let a = 10.455;
        let b = 5.5;
        let r = calcAdd(a,b);
        let res = Number(r).toFixed(2);
    })

    function calcAdd(a, b) {
        let c = 0;
        let d = 0;
        let e = 0;
        try {
            c = a.toString().split('.')[1].length;
        } catch (e) {
            c = 0;
        }
        try {
            d = b.toString().split('.')[1].length;
        } catch (e) {
            d = 0;
        }
        return (e = Math.pow(10, Math.max(c, d))), (calcMul(a, e) + calcMul(b, e)) / e;
    }

    /**
     * 乘法
     * @param a
     * @param b
     */
    function calcMul(a, b) {
        a = Number(a).toString()
        b = Number(b).toString()
        let c = 0;
        let d = a;
        let e = b;
        try {
            c += d.split('.')[1].length;
        } catch (f) {}
        try {
            c += e.split('.')[1].length;
        } catch (f) {}
        return (Number(d.replace('.', '')) * Number(e.replace('.', ''))) / Math.pow(10, c);
    }
</script>
</html>